<template>
	  <view class="param-info" v-if="Object.keys(paramInfo).length !== 0">
	    <view v-for="(table, index) in paramInfo.sizes"
	           class="info-size" :key="index">
	      <view class="tr" v-for="(tr, indey) in table" :key="indey">
	        <text class="td" v-for="(td, indez) in tr" :key="indez">{{td}}</text>
	      </view>
	    </view>
	    <view class="info-param">
	      <view class="tr" v-for="(info, index) in paramInfo.infos" v-bind:key="index">
	        <text class="info-param-key td">{{info.key}}:</text>
	        <text class="param-value td">{{info.value}}</text>
	      </view>
	    </view>
	    <view class="info-img" v-if="paramInfo.image.length !== 0">
			<image :src="paramInfo.image"></image>
	    </view>
	  </view>
</template>

<script>
	export default {
		props: {
			paramInfo: {
				type: Object,
				default:function (){
					return {}
				}
		  }
		},
		data() {
			return {
				
			}
		},
		methods: {			
		}
	}
</script>

<style scoped>
  .param-info {
    padding: 40rpx 30rpx;
    font-size: 28rpx;
    border-bottom: 10rpx solid #f2f5f8;
  }
  .info-size .td{
	  padding-right:70rpx;
  }
  .param-info .tr {
    width: 100%;
    border-collapse: collapse;
  }

  .param-info view .tr {
	line-height: 60rpx;
  }

  .param-info view .tr .td {
    border-bottom: 2rpx solid rgba(100,100,100,.1);
  }

  .info-param-key {
    /*当value的数据量比较大的时候, 会挤到key,所以给一个固定的宽度*/
    width: 190rpx;
  }

  .info-param {
    border-top: 2rpx solid rgba(0,0,0,.1);
  }
  .param-value {
    color: #eb4868
  }

  .info-img image {
    width: 100%;
  }
</style>
